
require(['./config'],() => {
    require(['template','header','footer','jquery'],(template,header)=>{
        class Cart{
            constructor(){
       
                this.prodList = []
                this.allCount= 0
                this.allPrice= 0
                this.checkAll=true
                this.init()
            }
            init(){
                this.allCount= 0
                this.allPrice= 0
                let prodList = localStorage.getItem('prodList')
                if(prodList){
                    // console.log(prodList)
                    this.prodList = JSON.parse(prodList)
                    $('.base-container')[0].style.display = 'block'
                    //渲染页面
                    const html= template('prodListTemplate',{list:this.prodList,checkAll:this.checkAll})
                    $('.cart-con').html(html)
                    this.prodList.forEach(item=>{
                        //计算总量和总价
                       if(item.isChecked){
                        this.allCount += item.count
                        this.allPrice += (item.count * item.price)
                       }
                    })
                    $('.allCount').text(this.allCount)
                    $('.allPrice').text((this.allPrice).toFixed(2))

                    header.computedCount()
                    this.delProd()
                    this.changeCount()
                    this.check()
                   
                }
                this.prodList = JSON.parse(prodList)
                if( this.prodList == ''){
                    // console.log( $('.empty'))
                    $('.empty p')[0].style.display = 'block'
                    $('.base-container')[0].style.display = 'none'
                }
               
                
            }


            //删除
        delProd(){
            const delBtn = document.querySelectorAll('.btn-del')
            for(let i = 0; i < delBtn.length; i++){
                delBtn[i].onclick = () => {
                    this.prodList.splice(i,1)
                    //再次存localStorage
                    localStorage.setItem('prodList',JSON.stringify(this.prodList))
                    //重新渲染页面
                    $('.delete').fadeIn(2000,()=>{
                        $('.delete').fadeOut(2000)
                    })
                    this.init()
                }
            }
        }

            // 改变数量
            changeCount(){
                    const cartReduceBtns = document.querySelectorAll('.cartReduce'),
                    cartAddBtns = document.querySelectorAll('.cartAdd'),
                    that = this  // 先把 this 保存一下
                // 绑定事件
                // console.log(cartReduceBtns)
                for(let i = 0 ; i < cartReduceBtns.length ; i++){
                    cartReduceBtns[i].onclick = function(){

                        that.addReduce('reduce',that,this)

                    }
                    cartAddBtns[i].onclick = function(){

                        that.addReduce('add',that,this)

                    }
                    // 点击按钮的时候 找到商品的 id 然后用 prodList 进行对比
                }
            }

            addReduce(str,that,_this){
                // 获取 id 
                const id = $(_this).parent().attr('prodId') - 0 
                // this.prodList 里面找到这条数据 改变他的数量
                that.prodList.forEach(item => {
                    if(item.id === id){
                        if(str === 'reduce'){
                            if(item.count <= 1){
                                return 
                            }
                            item.count--
                        }else{
                            item.count++
                        }
                        // 重新保存一下数据到localStorage 
                        localStorage.setItem('prodList',JSON.stringify(that.prodList))
                        // 重新渲染页面
                        that.init()
                    }
                })
            }

            //全选
            check(){
                const that = this
                $('.checkAll')[0].onclick = function(){                 
                   that.checkAll = !that.checkAll
                    that.prodList.forEach(item =>{
                        item.isChecked = that.checkAll
                    })
                    localStorage.setItem('prodList',JSON.stringify(that.prodList))
                    //重新渲染页面
                    that.init()
                }
                const inps = $('.footer> .first > .checkbox')
                // console.log(inps)

                for(let i = 0; i<inps.length; i++){
                    inps[i].onclick = function(){
                       
                        that.prodList[i].isChecked = !that.prodList[i].isChecked
                       
                        const flag = that.prodList.every(item=>{
                            return item.isChecked
                            
                        })
                        that.checkAll = flag
                        // $('.checkAll').addClass('checked')
                        localStorage.setItem('prodList', JSON.stringify(that.prodList))
                        //重新渲染页面
                        that.init()
                    }
                }
            }
        }
        return new Cart()
    })
})